<template>
  <div class="box" v-if="show">
    <div class="mask"></div>

    <div class="dialog">
      <div class="dialog_header">
        <slot name="header">
          <span>提示</span>
          <button @click="handleClose">关闭</button>
        </slot>
      </div>

      <div class="dialog_body">
        <slot> 我是 body </slot>
      </div>

      <div class="dialog_footer">
        <slot name="footer"> 我是 footer </slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    show: Boolean
  },

  emits: ['update:show'],

  methods: {
    handleClose() {
      // this.show = false

      this.$emit('update:show', false)
    }
  }
}
</script>

<style scoped>
.box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  background-color: #fff;
}

.dialog .dialog_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 40px;
  border-bottom: 1px solid #ccc;
}

.dialog .dialog_footer {
  display: flex;
  align-items: center;
  height: 40px;
  border-top: 1px solid #ccc;
}

.dialog .dialog_body {
  padding: 20px;
}
</style>
